import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import ALPHA from './assets/mesh/alpha.jpg'
import ROUGHNESS from './assets/mesh/roughness.jpg'
import METALNESS from './assets/mesh/metalness.jpg'
import NORMAL from './assets/mesh/normal.jpg'
import DISPLACEMENT from './assets/mesh/displacement.jpg'

const scene = new THREE.Scene();
// 相机 （透视相机）  角度、宽高比、近端面、远端面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);


const event = {}
event.onLoad = () => {
    console.log("is over")
}

event.onProgress = function (
    url,
    num,
    total
) {
    console.log(url, "  加载进度 = ", ((num / total) * 100).toFixed(2), "%")
}

event.onError = function (e) {
    console.log("is error ", e)
}

// 加载管理器
const manager = new THREE.LoadingManager(event.onLoad, event.onProgress, event.onError);

const textureLoader = new THREE.TextureLoader(manager)
const alphaloader = textureLoader.load(ALPHA)
const roughnessloader = textureLoader.load(ROUGHNESS)
const metalnessloader = textureLoader.load(METALNESS)
const normalloader = textureLoader.load(NORMAL)
const displacementloader = textureLoader.load(DISPLACEMENT)
// const displacementloader = textureLoader.load(DISPLACEMENT, event.onLoad, event.onProgress, event.onError)

// 标准网格材质
const mgeometry = new THREE.BoxGeometry(1, 1, 1);
const meshStandardMaterial = new THREE.MeshStandardMaterial({
    map: alphaloader,
    alphaMap: alphaloader,
    // 渲染两面（外面、里面）
    side: THREE.DoubleSide,
    // 置换贴图
    displacementMap: displacementloader,
    displacementScale: 0.5,
    // opacity: 0.5
    // 粗糙度
    roughness: 1,
    roughnessMap: roughnessloader,
    // 金属贴图，光打上来将呈现金属光芒
    metalness: 1,
    metalnessMap: metalnessloader,
    // 法线光贴图
    normalMap: normalloader
});
const mCube = new THREE.Mesh(mgeometry, meshStandardMaterial);
mCube.position.set(0, 0, 0)
scene.add(mCube);

// 灯光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-10, 10, 10)
scene.add(directionalLight);

// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 渲染
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 新增轨迹控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 使用渲染器   通过相机将场景渲染
function render(time) {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render()